<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
  <th:block th:include="include :: header('单位预算')"/>
</head>
<body class="pear-container">

<div class="layui-card">
  <div class="layui-card-body">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">年度</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" style="width: 50px;display: inline" id="nd">
        </div>
        <div class="layui-input-inline" style="float: right">
          <input type="radio" name="dw" value="1" title="元" checked="checked">
          <input type="radio" name="dw" value="10000" title="万元">
        </div>
      </div>
    </form>
  </div>
</div>

<div class="layui-card">
  <div class="layui-card-body">
    <table  class="layui-table" id="dept-preparation-table" lay-filter="dept-preparation-table"></table>
  </div>
</div>

<div class="layui-card">
  <div class="layui-card-body">
    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
    </div>
  </div>
</div>

</body>

<th:block th:include="include :: footer"/>

<script>
  layui.use(['table', 'echarts', 'laydate', 'element', 'form', 'jquery'], function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let echarts = layui.echarts;
    let laydate = layui.laydate;
    let element = layui.element;

    let MODULE_PATH = "/budget/deptpreparation/";

    //加载年度选择
    let now = new Date();
    let curYear = now.getFullYear();
    laydate.render({
      elem: '#nd'
      , type: 'year'
      , value: curYear
      , btns: ['now', 'confirm']
      , done: function (value, date, endDate) {
        alert(value);
      }
    });

    //加载表格数据
    let cols = [
      [
        {title: '配置名称', field: 'bmdm', align: 'center', width: 120},
        {title: '类型', field: 'bmmc', align: 'center'},
        {title: '配置值', field: 'lxzcys', align: 'center'},
        {title: '具体描述', field: 'jzzfys', align: 'center'}
      ]
    ]

    function tableRender(dataList) {
      table.render({
        elem: '#dept-preparation-table'
        , page: false
        , loading: true
        , even: false
        , skin: 'line'
        , totalRow: false
        , data: dataList
        , toolbar: false
        , cols: cols
      });
    }

    let dataListTemp = [
      {bmdm: '01', bmmc: 'aaa', lxzcys: 12, jzzfys: 324},
      {bmdm: '02', bmmc: 'bbb', lxzcys: 12, jzzfys: 324},
      {bmdm: '03', bmmc: 'ccc', lxzcys: 12, jzzfys: 324},
      {bmdm: '04', bmmc: 'ddd', lxzcys: 12, jzzfys: 324}
    ];

    tableRender(dataListTemp);




    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

    var option = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: [{
        type: 'category',
        data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
        axisLine: {
          lineStyle: {
            color: "#999"
          }
        }
      }],
      yAxis: [{
        type: 'value',
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#DDD'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#333"
          },
        },
        nameTextStyle: {
          color: "#999"
        },
        splitArea: {
          show: false
        }
      }],
      series: [{
        name: '课时',
        type: 'line',
        data: [23, 60, 20, 36, 23, 85],
        lineStyle: {
          normal: {
            width: 8,
            color: {
              type: 'linear',

              colorStops: [{
                offset: 0,
                color: '#A9F387' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#48D8BF' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          }
        },
        itemStyle: {
          normal: {
            color: '#fff',
            borderWidth: 10,
            borderColor: "#A9F387"
          }
        },
        smooth: true
      }]
    };
    echartsRecords.setOption(option);

    window.onresize = function () {
      echartsRecords.resize();
    }
  })
</script>
</html>
